<template>
    <div class="group-container">
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>选择群聊</template>
            <template #right><i class="iconfont icon-home" @click="$router.push('/')"></i></template>
        </TridentNavBar>

        <!-- 内容区域开始 -->
        <div class="content-wrap">
            <div class="group-box">
                <div class="group-items">
                    <!-- 骨架屏区域 -->
                    <TridentCellSkeleton
                        v-if="isSkeleton"
                        v-for="(index) in 7" :key="index"
                        :isLeftSecondRow="false"
                        :isRight="false"
                        width="65px"
                        height="65px"
                    />

                    <template v-if="groupChatList.length > 0">
                        <TridentGroupChatItem v-for="(item, index) in groupChatList" :key="index" :item="item" @click="$router.push('/chat?mode=2&gid=' + item.id)"/>
                    </template>

                    <template v-else>
                        <TridentEmpty v-if="!loading" message="暂无群聊"/>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reqGroupChatListAPI } from '@/apis/groupChat'
import TridentGroupChatItem from '@/components/library/TridentGroupChatItem.vue';
import type { GroupChat, GroupChatListParams } from '@/types/groupChat'
import { onMounted, ref } from 'vue'

// 骨架屏
const isSkeleton = ref<boolean>(false)

// 加载中
const loading = ref<boolean>(false)

onMounted(async() => {
    await getGroupChat()
})

// ------------------- 处理群聊开始 -------------------
// 群聊列表
const groupChatList = ref<GroupChat[]>([])

// 获取群聊列表参数
const params = ref<GroupChatListParams>({
    is_my: 1,
    name: '',
    page: 1
})

// 获取群聊列表
const getGroupChat = async () => {
    isSkeleton.value = true
    loading.value = true
    const result = await reqGroupChatListAPI(params.value)
    groupChatList.value = result.data.group_chats
    isSkeleton.value = false
    loading.value = false
}
// ------------------- 处理群聊结束 -------------------
</script>

<style scoped lang="scss">
page,
.group-container {
    height: 100vh;

    // 内容区域开始
    .content-wrap {
        padding-top: 55px;
        padding-bottom: 10px;
        .group-box {
            .group-items {
                padding: 0 15px;
            }
        }
    }
}
</style>